<template>
  <view v-if="goods.productName" class="goods-detail-container">
    <video
      id="myVideo"
      :src="goods.productVideoUrl"
      :controls="controls"
      :autoplay="autoplay"
      style="width: 100%; height: 200px;
	   
	  "
	  :muted="muted"
	  show-mute-btn=true
    ></video>
    <!-- 商品信息区域 -->
    <view class="goods-info-box">
      <!-- 商品价格 -->
      <view class="price">￥{{goods.productPrice}}</view>
	  <!-- 款式选择 -->
	 <uni-list-item  note="款式选择" showArrow
	  	:thumb="goods.productImgUrl"
	  	thumb-size="lg"  @click="unShow = true" link/>  
		
		<!-- 底部弹出款式选择 -->
		<u-popup v-model="unShow" mode="bottom" border-radius="14" length="70%" :closeable="closeable">
			<!-- 文字提示 -->
		<uni-notice-bar single color="#ff0000" background-color="#ffffff"
					text="不支持七天无理由退货 极速退款" />
					</uni-section>
			<!-- 已登陆地址 -->
			<uni-list-item :title="address.detail" :note="address.detail1" showArrow
				thumb="/static/icons/gps.png"
				thumb-size="base"  @click="gotoDelAddress" class="shadowed-item" link v-show="isLogin"/> 
			<!-- 未登陆 -->
			<uni-list-item thumb="/static/icons/addAddress.png" showArrow class="shadowed-item" title="新增地址" link v-show="!isLogin" @click="gotoaddAddress"/>
			<!-- 数量选择 -->
		 <div class="product-info">
		     <image class="product-image" :src="goods.productImgUrl" alt="Product Image" />
		     <div class="price-and-counter">
		         <span class="price"> <view class="price">￥{{goods.productPrice}}</view></span>
		         <div class="counter">
               <uni-number-box :min="1" :max="9" :value="number" @change="changeValue"></uni-number-box>
					 <div style="margin-left: 10rpx;">{{product}}</div>
		         </div>
		     </div>
		 </div>
			<span class="title">颜色分类</span> 
		<uni-data-checkbox mode="tag" v-model="radio1" :localdata="color" style="margin-left: 18px;" selectedColor="#ff6408" >
		</uni-data-checkbox>
            <span class="title">宠物年龄</span> 
		<uni-data-checkbox mode="tag" v-model="radio2" :localdata="age" style="margin-left: 18px;" selectedColor="#ff6408">
		</uni-data-checkbox>
			<span class="title">动物性别</span> 
		<uni-data-checkbox mode="tag" v-model="radio3" :localdata="sex" style="margin-left: 18px;" selectedColor="#ff6408">
		</uni-data-checkbox>
		<!-- 提示 -->
		<u-button size="mini" style="margin-left: 300rpx;margin-top: 90rpx;"><u-icon name="error-circle"></u-icon>48小时内发货</u-button>

            <u-button shape="square" style="position:fixed; bottom: 0; left: 0; right: 0;font-size: 40rpx;" type="warning" @tap="addshopCart" v-show="buttonShow">
				加入购物车
			</u-button>
			
			<u-button shape="square" style="position:fixed; bottom: 0; left: 0; right: 0;background-color: #bf191d;color: white;font-size: 40rpx;" type="default" @tap="gotoPay" v-show="!buttonShow">
				立即支付
			</u-button>
			</u-popup>
			
      <!-- 商品信息主体区域 -->
      <view class="goods-info-body">
        <!-- 商品的名字 -->
        <view class="goods-name">{{goods.productName}}</view>
        <!-- 收藏 -->
        <view class="favi">
          <u-icon name="level" color="#2979ff" size="28"></u-icon>
          <text style="color: royalblue;">官方认证</text>
        </view>
      </view>
      <!-- 快递 运费 等提示 -->
      <view class="yf">
		  <uni-list-item title="48小时内发货" note="多仓发货 快递: 免运费" showArrow
		   	thumb="/static/icons/waitDel.png"
		   	thumb-size="lg" @click="openStyle(1)" link/>  
		  <!-- 退货 -->
		  <uni-list-item title="不支持七天无理由退货 极速退款"  showArrow
		   	thumb="/static/icons/love.png"
		   	thumb-size="lg" @click="openStyle(2)" link class="shadowed-item"/>  
			
			<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
				<!-- 物流 -->
				<view v-show="UShow1">
				<!-- 文字提示 -->
				<uni-notice-bar single color="#00aa00" background-color="#ffffff"
							text="48小时内发货" />
							</uni-section>	
				<hr style="border: none; border-top: 1px solid #ccc;">
				<!-- 步骤条 -->
				<u-steps :list="stepList" :current="4" mode="dot" direction="column" style="margin-left: 18px;margin-bottom: 80rpx;"></u-steps>
				<!-- 确定按钮 -->
				<u-button shape="square" style="position:fixed; bottom: 0; left: 0; right: 0;" type="warning" @tap="closeStyle(1)">
					我知道了
				</u-button>
				</view>
				
				<!-- 七天无理由 -->
				<view v-show="UShow2">
				<!-- 文字提示 -->
				<uni-notice-bar  color="#ff0000" background-color="#ffffff"
							text="不支持7天无理由退货" />	
				<u-alert-tips type="primary"  description="此商品不支持7天无理由退换"></u-alert-tips>
				<uni-notice-bar  color="#ff0000" background-color="#ffffff"
							text="极速退款" />	
				<u-alert-tips type="primary"  description="满足响应条件时,信誉良好的用户在退货寄出后,享受极速退款到账" style="margin-bottom: 400rpx;">
					
				</u-alert-tips>
				<!-- 确定按钮 -->
				<u-button shape="square" style="position:fixed; bottom: 0; left: 0; right: 0;" type="warning" @tap="closeStyle(2)">
					我知道了
				</u-button>
				</view>
				</uni-popup>
	  </view>
    </view>
           <!-- 评价 -->
         <uni-list-item :border="false" showArrow :title="commentNum" rightText="全部" @tap="gotoComment" link/>
		 				<uni-list-item :border="false">
		 					<template v-slot:header>
							<view class="slot-box">
							<image class="slot-image" src="/static/tourist.jpg" mode="widthFix"></image>
							</view>
		 					</template>
		 					<template v-slot:body v-show="!isContent">
		 						<text class="slot-box slot-text">
									<span style="color: black;">匿名买家:</span><br />
									<span style="color: #ccc;">.......</span><br />
									<span style="color: #ccc;">.......</span>
									</text>
		 					</template>
<!-- 							<template v-slot:body v-show="isContent">
								<text class="slot-box slot-text">
									<span style="color: black;">匿名买家:</span><br />
									<span style="color: #ccc;">.......</span><br />
									<span style="color: #ccc;">.......</span>
									</text>
							</template> -->
		 					<template v-slot:footer>
		 						<!-- <image class="slot-image" src="/static/111.png" mode="widthFix"></image> -->
		 					</template>
		 				</uni-list-item>
						
    <!-- 商品导航组件区域 -->
    <view class="goods_nav">
	  <uni-goods-nav   :options="options" :buttonGroup="customButtonGroup"  @click="onClick" @buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script>
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import {
		get,
		post,
		setToken
	} from '@/utils/api.js';
	import { uniGoodsNav } from '@dcloudio/uni-ui';
export default {
	  components: {
	    uniGoodsNav,
	  },
  data() {
    return {
		address:{},
		isContent:false,//是否有评价
		commentNum:'评价(100+)',
		buttonShow:true,
		active: 1,
		closeable:true, //关闭图标是否显示
		unShow:false, //控制unipopup显示
		UShow1:false, 
		UShow2:false,
		UShow3:false,
		isLogin:true, //是否登陆
		product:'有货', //货物数量
		isShow:true, //是否有货
		number:1,
		radio1: '红色',
		radio2: '六个月以下',
		radio3: '雌性',
						color: [{
							text: '红色',
							value: '红色'
						}, {
							text: '白色',
							value: '白色'
						}, {
							text: '黄色',
							value: '黄色'
						}],
						age: [{
							text: '六个月以下',
							value: '六个月以下'
						}, {
							text: '六个月-十二个月',
							value: '六个月-十二个月'
						}, {
							text: '十二个月以上',
							value: '十二个月以上'
						}],
						sex: [{
							text: '雌性',
							value: '雌性'
						}, {
							text: '雄性',
							value: '雄性'
						}],
		videoPath:[],
		options1:[],
		 src: '',  // 视频地址
		        controls: true,  // 是否显示控制条
		        autoplay: true,  // 是否自动播放
				muted:true,
      cart: [], // 假设购物车初始为空数组
      total: 0, // 购物车商品总数的假数据
      goods: {}, // 商品信息初始为空对象
options: [{
					icon: 'arrow-left',
					text: '返回'
				}, {
					icon: 'shop',
					text: '店铺',
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 3
				}],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #ff5500, #dea01f)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #ff007f, #ff557f)',
						color: '#fff'
					}
				],
				customButtonGroup1: [{
					text: '加入购物车',
					backgroundColor: '#dea01f',
					color: '#fff'
				}],
			stepList: [{
				   name: '发货地发货前-送平台核验'
				}, {
					name: '收货地-客户收货'
				}, {
					name: '收货后出现问题-可在1-3日内申请平台·立马介入'
				}, {
					name: '直到问题解决-交易完成'
				}]
    };
  },
watch: {
  total: {
    handler(newVal) {
      if (this.options) {
        const findResult = this.options.find(x => x.text === '购物车');
        if (findResult) {
          findResult.info = newVal;
        }
      }
    },
    immediate: true,
  },
},
		created() {
			this.getComment()
		  // 确保 videoPath 已经加载完成
		  if ( uni.getStorageSync('productId') && uni.getStorageSync('productByStore')) {
			// 假设 petId 是一个数组索引，你可以根据这个ID来选择正确的URL
			const productId = uni.getStorageSync('productId');
			 this.options[2].info = uni.getStorageSync('shopNum')
           this.getProInfo()
		   if(uni.getStorageSync('addressId'))
		   {
			  this.getNewAddress()
			  uni.removeStorageSync('addressId')
		   }
		   if(uni.getStorageSync('uni_id_token'))
		   {
			 this.getMydefultAddress()
		   }
		  }
		},
	  beforeDestroy() {
	  	uni.removeStorageSync('productId')
		uni.removeStorageSync('productByStore')
	  },
  methods: {
	  getComment()
	  {
		get('/comment/product', { productId: 2 }, {
		   needToken: true,  // 如果请求需要认证，则设置为true
		   success: function(res) {
				console.log('获取产品评论成功:', res);
			},
			fail: function(err) {
				console.error('获取产品评论失败:', err);
			}
		});
	  },
	  getProInfo()
	  {
		post('/product/getProductInfoByProductId', {
		  productId: uni.getStorageSync('productId'),
		  productByStore: uni.getStorageSync('productByStore'),
		}, {
		  needToken: true, 
		  success: (res) => {
			if (res.statusCode === 200) {
				this.goods = res.data.data
			  console.log('获取商品详情成功');
			}
		  }
		});  
	  },
	  gotoComment() {
		  uni.setStorageSync('commentStoreProductName',this.goods.productName),
		   uni.setStorageSync('commentStoreName',this.goods.productByStore),
		  uni.navigateTo({
		  	url:'/pages/commentArea/commentArea'
		  })
	  },
	  gotoPay()
	  {
		 let shopData = {
		 		  shopPrice: this.goods_info.goods_price,
		 		  shopName: this.goods_info.goods_name,
		 		  shopColor: this.radio1,
		 		  shopAge: this.radio2,
		 		  shopSex: this.radio3,
		 		  shopNumber: this.number,
		 		  tradeName:'BOSS电竞'
		 		};
		 		uni.setStorageSync('shopData',shopData)
		 	    uni.navigateTo({
		 	    url:'/pages/editOrder/editOrder'
		 		})	 
	  },
	  addshopCart() {
		  console.log(this.goods)
		  let shopData = {
		    cartProductByStore: this.goods.productByStore,
		    cartProductId: this.goods.productId,
		    cartProductName: this.goods.productName,
		    cartProductColor: this.radio1,
		    cartProductAge: this.radio2,
		    cartProductGender: this.radio3,
		    cartProductNum: this.number,
			cartUser: store.userInfo.username,
			cartCurrentPrice:this.goods.productPrice,
			cartImgUrl:this.goods.productImgUrl
		  };
		  post('/cart/addToCart', shopData, {
		    needToken: true, 
			  success: (res) => {
				if (res.statusCode === 200) {
				  console.log('添加购物车成功');
				}
			  }
		  });  
		 uni.showToast({
		   title: '添加购物车成功',
		   icon: 'none',
		   duration: 2000
		 }); 
		 this.unShow = false
		  this.options[2].info++
	  },
	  changeValue(value) {
		this.number = value
		},
		getNewAddress() {
		post('/address/getAddressInfo',
		{
		 addressId:uni.getStorageSync('addressId')
		}, {
		  needToken: true, 
			success: (res) => {
			if (res.statusCode === 200) {
				this.address = res.data
				this.address.detail = this.address.addressCity + ' ' +  this.address.addressArea
				this.address.detail1 = this.address.addressHost + ' ' +  this.address.addressHostTel
			}
		  }
		}); 
		},
		getMydefultAddress() {
			console.log(store.userInfo.username)
		post('/address/default',
		{
         username:store.userInfo.username
		}, {
		  needToken: true, 
			success: (res) => {
			if (res.statusCode === 200) {
				console.log(res.data)
				this.address = res.data
				this.address.detail = this.address.addressCity + ' ' +  this.address.addressArea
				this.address.detail1 = this.address.addressHost + ' ' +  this.address.addressHostTel
			}
			else{
				this.isLogin = !this.isLogin
			}
		  }
		}); 	
		},
	  gotoDelAddress() {
		  uni.setStorageSync('selectAddress','selectAddress')
		 uni.navigateTo({
		 	url:'/pages/DelAddress/DelAddress'
		 }) 
	  },
	  gotoaddAddress() {
	  		 uni.navigateTo({
	  		 	url:'/pages/addAddress/addAddress'
	  		 }) 
	  },
	  // 弹出层
	  openStyle(number) {
		  if(number === 1)
		  {
			  this.UShow1 = true
		  }
		  else if(number === 2)
		  {
			  this.UShow2 = true
		  }
		  else{
			  this.UShow3 = true
		  }
		  this.$refs.popup.open('bottom')
	  },
	  closeStyle(number) {
		  if(number === 1)
		  {
		  	this.UShow1 = false
		  }
		  else if(number === 2)
		  {
		  	this.UShow2 = false
		  }
		  else{
		  	this.UShow3 = false
		  }
		  this.$refs.popup.close()
	  },
 onClick (e) {
	 if(uni.getStorageSync('uni_id_token'))
	 {
		 if(e.index === 2)
		 {
			 uni.reLaunch({
			 	url:'/pages/shoppingCart/shoppingCart'
			 })
		 }
		 else if(e.index === 1)
		 {
			uni.setStorageSync('storeName',uni.getStorageSync('productByStore'))
			uni.navigateTo({
			url:'/pages/store/store'
			})	
		 }
		 else
		 {
             uni.switchTab({
             	url:'/pages/index/index'
             }) 
		 }
         
	    }
		else
		{
			if(e.index === 0)
			{
			    uni.switchTab({
			    	url:'/pages/index/index'
			    }) 
			}
			else if(e.index === 1)
			{
			uni.navigateTo({
			url:'/pages/store/store'
			})	
			}
			else
			{
			uni.showToast({
			  title: '请先登录',
			  icon: 'none',
			  duration: 2500
			});
			uni.navigateTo({
			url:'/uni_modules/uni-id-pages/pages/login/login-withpwd'
			})		
			}

		}
	 },

	  buttonClick (e) {
	    console.log(e.index)
		if(uni.getStorageSync('uni_id_token'))
		{
			if(e.index === 0)
			{
				this.buttonShow = true
				 //this.options[2].info++
			}
			else{
				this.buttonShow = false
			}
			this.unShow = true
		}
		else{
			uni.showToast({
			  title: '请先登录',
			  icon: 'none',
			  duration: 2500
			});
			uni.navigateTo({
			url:'/uni_modules/uni-id-pages/pages/login/login-withpwd'
			})	
		}
	  },
  onLoad(options) {
    // this.getGoodsDetail(1); 
	//判断是否登陆
	if(uni.getStorageSync('uni_id_token'))
	{
		this.isLogin = true
		console.log(this.isLogin)
	}
	else
	{
		this.isLogin = false
		console.log(this.isLogin)
	}
  },
  // ...（其他生命周期钩子保持不变）...
},
}
</script>

<style lang="scss">
	.shadowed-item {
	  position: relative;
	}

	.shadowed-item::after {
	  content: '';
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  height: 8px;
	  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
	  z-index: 1;
	}
  swiper {
    height: 750rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .goods-info-box {
    padding: 10px;
    padding-right: 0;
    .price {
      color: #ff0000;
      font-size: 25px;
      margin:0;
    }

    .goods-info-body {
      display: flex;
      justify-content: space-between;

      .goods-name {
        font-size: 13px;
        margin-right: 10px;
		 margin-left: 16px;
      }

      .favi {
        width: 120px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #efefef;
        color: gray;
      }
    }

    .yf {
      font-size: 12px;
      color: gray;
      margin: 10px 0;
    }
  }

  .goods_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .goods-detail-container {
    padding-bottom: 50px;
  }
	.title{
	font-size: 15px;
	line-height: 20px;
	color: #333;	
	margin-left: 18px;
	}
	.imgeg {
	 width: 150rpx;
	 height: 150rpx;
	 margin-top: 15rpx;
	 border-radius:30rpx;
	 margin-left: 18px;
	}
	.product-info {
	    display: flex;
	}
	
	.product-image {
	 width: 150rpx;
	 height: 150rpx;
	 margin-top: 15rpx;
	 border-radius:30rpx;
	 margin-left: 18px;
	}
	
	.price-and-counter {
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: center;
	    padding-left: 10px;
	}

	.counter {
	    display: flex;
	    align-items: center;
	    font-size: 1.2em;
	}
	
	.counter button {
	    background: none;
	    border: none;
		height: 50rpx;
		width: 50rpx;
		text-align: center;
	}
	
	.counter span {
	    width: 30px;
	    text-align: center;
	    padding: 5px;
	}
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #4cd964;
		margin-right: 10px;
	}
</style>